<head>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<script type="text/javascript"
        src="<%=request.getContextPath()%>/script/datecheck.js"></script>
<script type="text/javascript"
        src="<%=request.getContextPath()%>/script/createquestion.js"></script>
<script type="text/javascript"
        src="<%=request.getContextPath()%>/script/rte.js"></script>
<body onload="ShowResponse();">
    <!-- Menu -->
    <jsp:include page="menu.jsp" />

    <!--START: Subnav -->
    <div class="sub_nav">
        <ul>
            <li>
                <a href="#" onclick="navToGeneral();"><img src="<%=request.getContextPath()%>/images/menu/sub_general_on.gif"
                                                               width="114" height="18" alt="general" />
                </a>
            </li>
            <li>
                <a href="#" onclick="navToWhereUsed();"><img src="<%=request.getContextPath()%>/images/menu/sub_where_used_off.gif"
                                                                 width="114" height="18" alt="whereUsed" />
                </a>
            </li>
        </ul>
    </div>
    <!--END: Subnav -->
    <!--START: conent -->
    <form id="question" method="post">
        <input type="hidden" id="submitAction" name="submitAction" />
        <input type="hidden" id="questionId" name="questionId" value="${question.questionId}"/>
        <input type="hidden" id="responseId" name="responseId" value="${question.responseType.responseTypeId}"/>
        <jsp:include page="editCommon.jsp" />
    </form>
    <!--END: conent -->
    <!-- Questions Tab Page -->
    <div class="content2" id="whereUsed" style="display:none">
        <div class="insider">
            <div class="corners">
                <div class="corners_top"></div>

                <div class="column1">
                    <table width="750" border="0" cellspacing="4" class="formlayout_table">
                        <tr>
                            <th width="160"><label>ID:</label></th>
                            <td width="287">${question.refId}</td>
                            <th width="152"><label>Status:</label></th>
                            <td width="131">${question.questionStatusType.code}</td>
                        </tr>
                        <tr>
                            <th><label>Version:</label></th>
                            <td>${question.version}</td>
                            <th><label>Availability:</label></th>
                            <td>${question.questionAvailabilityType.code}</td>
                        </tr>
                        <tr>
                            <th><label>Name:</label></th>
                            <td>${question.name}</td>                          
                        </tr>
                        <tr>
                            <th><label>Vocabulary Name:</label></th>
                            <td>${question.vocabularyname}</td>
                            <th><label>Last Modified Date:</label></th>
                            <td>
                                <fmt:formatDate value="${question.modifiedOn}" pattern="dd-MMM-yyyy" />
                            </td>
                        </tr>
                        <tr>
                            <th><label>Last Modified By:</label></th>
                            <td>${question.modifiedBy.username}</td>
                        </tr>
                        <tr>
                            <th><label>Question Text:</label></th>
                            <td colspan="3">${question.text}</td>
                        </tr>
                    </table>
                </div>

                <ul class="functions1 fun1_2">
                    <li>
                        <a href="#" onclick="jumpAction('SUBMIT');"><img src="<%=request.getContextPath()%>/images/btn/functions1/btn_save.gif"
                                                                             width="122" height="23" class="btn" />
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="jumpAction('SUBMIT_AND_EXIT');"><img src="<%=request.getContextPath()%>/images/btn/functions1/btn_save_exit.gif"
                                                                                      width="122" height="23" class="btn" />
                        </a>
                    </li>
                    <li>
                        <a href="list.html?from=cancel&checkSearch=list"><img src="<%=request.getContextPath()%>/images/btn/functions1/btn_cancel.gif"
                                                                 alt="" width="122" height="23" class="btn" />
                        </a>

                    </li>
                </ul>
                <div class="corners_bottom"></div>
            </div>

            <div class="error">
                <h3>
                    ${whereuserdmessage}
                    <style> p { margin:0px }</style>
                    <font color="red">
                        <p id="Msg_retire" style="display:none;">${Msg_retire}</p>
                        <p id="Msg_lock" style="display:none;">${Msg_lock}</p>
                    </font>
                </h3>
                <div class="display_mode">
                    <h4>Display mode:</h4>
                    <ul>
                        <li id="brief" onclick="briefMode();"><a href="#">Brief</a></li>
                        <li id="full" class="active" onclick="fullMode();"><a href="#">Full</a></li>
                    </ul>
                </div>
            </div>

            <!-- Function View and Edit -->
            <ul class="functions2">
                <li class="view">
                    <a href="#" onclick="clickAction('../questionset/view',true)" >
                        <img id="viewButton" src="<%=request.getContextPath()%>/images/btn/functions2/btn_view_light.gif"
                             width="68" height="23" alt="view" class="btn" />
                    </a>
                </li>
                <security:authorize ifAnyGranted="ROLE_PORTAL_USER, ROLE_AUTHOR">
                    <li>
                        <a href="#" onclick="itemClickAction('../questionset/edit',true)" >
                            <img id="editButton" src="<%=request.getContextPath()%>/images/btn/functions2/btn_edit_light.gif"
                                 width="69" height="23" alt="view" class="btn" />
                        </a>
                    </li>
                </security:authorize>
            </ul>
<!-- Questionnaire List -->
        <table width="100%" cellspacing="0" class="data_thead">
            <thead>
            <tr>
                 <th width="10%">
                    Name
                </th>
                <th width="10%">
                    ID
                </th>
                <th width="10%">
                    Version
                </th>
                <th width="15%">
                    Status
                </th>
                <th width="12%">
                    Availability
                </th>
                <th width="38%">
                    Title
                </th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
            <!-- Questionnaire List -->
            <div id="dataList" class="data_tbody">
                <c:forEach var="qsin" items="${questionSets}">
                    <div onclick="itemWhereClick(this, 'id=${qsin.questionSetId}','${qsin.status.code}','${qsin.availability.code}');" onmouseover="itemHover(this);"
                         onmouseout="itemMouseOut(this);">
                        <table width="100%" cellspacing="0" class="data_tbody_title">
                            <tbody>
                                <tr>
                                    <td width="10%" class="id_number">${qsin.name}</td>
                                    <td width="10%" class="id_number">${qsin.refId}</td>
                                    <td width="10%">${qsin.version}</td>
                                    <td width="15%">${qsin.status.name}</td>
                                    <td width="12%">${qsin.availability.name}</td>
                                    <td width="28%">${qsin.displayTitle}</td>                                    
                                    <td width="10%"><fmt:formatDate value="${qsin.modifiedOn}" pattern="MM/dd/yyyy" /></td>
                                </tr>
                                <tr>
                                    <td colspan="5" class="tro"></td>
                                </tr>
                            </tbody>
                        </table>
                        <table width="726" border="0" cellspacing="0" class="tro">
                            <tr>
                                <td width="153">User: <strong>${qsin.modifiedBy.username}</strong></td>
                                <td width="269">
                                    Last modified:
                                    <fmt:formatDate value="${qsin.modifiedOn}" pattern="MM/dd/yyyy" />
                                </td>
                                <td width="298" class="end">Vocabulary Name: <strong>${qsin.name}</strong></td>
                            </tr>
                            <tr>
                                <td colspan="2" class="end"><strong>${qsin.description}</strong></td>
                            </tr>
                        </table>
                    </div>
                </c:forEach>
            </div>
        </div>
    </div>
</body>	
<script type="text/javascript">
    var qavailability = "${question.questionAvailabilityType.code}";
    var qstatus = "${question.questionStatusType.code}";
    $(document).ready(function() { //data_tbody brief
        $("#editquestion").click(function (){
            $("#Msg_lock").hide();
            $("#Msg_retire").hide();
            if (qstatus == "retired"){
                $("#Msg_lock").hide();
                $("#Msg_retire").show();
                return false;
            }
            if (qavailability=="locked"){
                $("#Msg_retire").hide();
                $("#Msg_lock").show();
                return false;
            }
            if (qstatus == "active" && qavailability=="open"){
                $("#Msg_lock").hide();
                $("#Msg_retire").hide();
                window.location.href="edit.html?id="+${question.questionId};
            }
        });
    });
    var lightColorFlag = "_light.";
    var status = "";
    var availability = "";
    function itemWhereClick(item, params,qStatus,qAvailability) {
        // $("div.data_tbody div").removeClass("active");
        // $(item).addClass("active");        
        $("#Msg_lock").hide();
        $("#Msg_retire").hide();
        if($(item).attr("class").indexOf("active") == -1){
            $("div.data_tbody div").removeClass("active");
            $(item).addClass("active");
            var viewimgSrc = $("#viewButton").attr("src");
            var editimgSrc = $("#editButton").attr("src");
            var viewnewSrc = viewimgSrc.replace(lightColorFlag, '.');
            var editnewSrc = editimgSrc.replace(lightColorFlag, '.');
            $("#viewButton").attr("src", viewnewSrc);            
            if (qStatus == "retired" || qAvailability == "locked"){
                if (editimgSrc.indexOf(lightColorFlag)==-1){
                    var editnewSrc2 = editimgSrc.replace('.',lightColorFlag);                    
                    $("#editButton").attr("src", editnewSrc2);
                }
            }else{
                     $("#editButton").attr("src", editnewSrc);
              
            }
            status = qStatus;
            availability = qAvailability;
        }else {
            $("div.data_tbody div").removeClass("active");
            var viewimgSrc = $("#viewButton").attr("src");
            var editimgSrc = $("#editButton").attr("src");
            var viewnewSrc = viewimgSrc.replace('.',lightColorFlag);
            
            $("#viewButton").attr("src", viewnewSrc);
            if (editimgSrc.indexOf("_light")==-1){
                var editnewSrc = editimgSrc.replace('.',lightColorFlag);
            	$("#editButton").attr("src", editnewSrc)
            }
            
            status = "";
            availability = "";
        }
    itemParams = params;

}
function itemClickAction(action) {
    if (itemParams == "") {
        alert("Please select an item.");
    } else {
        if (status == "active" && availability=="open"){
            $("#Msg_lock").hide();
            $("#Msg_retire").hide();
            window.location.href=action + ".html?" + itemParams;
        }
        if (status == "retired"){
            $("#Msg_lock").hide();
            $("#Msg_retire").show();
            return false;
        }
        if (availability=="locked"){
            $("#Msg_retire").hide();
            $("#Msg_lock").show();
            return false;
        }

    }
}
</script>